<template>


<div id='racelist'>
  

         <x-header style="color:white"  title="use prop:title">
          <span slot="overwrite-title">汇跑赛事</span>
          <img style="width: 35px" slot="overwrite-left"
               src="/static/logo.png" alt="">
          <span @click="drawerVisibility = !drawerVisibility" slot="right"><i class="fa fa-user"></i></span>
        </x-header>
    
       <search
          style="position:relative"
          placeholder="赛事名称/举办地名"
          v-model="value"
          position="relative"
          :auto-fixed="false"
          auto-scroll-to-top top="46px"
          ref="search"></search>

            <flexbox class="selection">
          <flexbox-item @click.native="toggle($event,0)" class="needsclick">
            <div class="flex-demo">分类<i class='fa fa-sort-down'></i></div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,1)">
            <div class="flex-demo">日期<i class='fa fa-sort-down'></i></div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,2)">
            <div class="flex-demo">地区<i class='fa fa-sort-down'></i></div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,3)">
            <div class="flex-demo">筛选<i class='fa fa-sort-down'></i></div>
          </flexbox-item>
          <div class="wrapper">
            <div>
              <ul>

                <li>
                  <group>
                    <cell :border-intent="false" title="不限"></cell>
                    <cell :border-intent="false" title="全程马拉松"></cell>
                    <cell :border-intent="false" title="半程马拉松"></cell>
                  </group>
                </li>

                <li class="date">
                  <div>
                    <div class="data-box">
                      <div @click="chooseDate" class="data-left vux-1px-t vux-1px-b">
                        <div class="vux-1px-b">不限</div>
                        <div class="vux-1px-b">近一年</div>
                        <div class="vux-1px-b">近一月</div>
                        <div class="vux-1px-b">近一周</div>
                        <div class="vux-1px-b">年</div>
                      </div>
                      <div style="display:block" class="data-right vux-1px"></div>
                      <div style="display:none" class="data-right vux-1px">
                        <div style="display: flex;overflow:scroll;height:150px">
                          <div style="flex:1">
                            <p class="vux-1px-b" style="text-align:center">2011</p>
                            <p class="vux-1px-b" style="text-align:center">2012</p>
                            <p class="vux-1px-b" style="text-align:center">2013</p>
                            <p class="vux-1px-b" style="text-align:center">2014</p>
                            <p class="vux-1px-b" style="text-align:center">2015</p>
                            <p class="vux-1px-b" style="text-align:center">2016</p>
                            <p class="vux-1px-b" style="text-align:center">2017</p>
                            <p class="vux-1px-b" style="text-align:center">2018</p>
                            <p class="vux-1px-b" style="text-align:center">2019</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="area">
                  <div class="">

                    <flexbox class="vux-1px-t vux-1px-b">
                      <flexbox-item @click.native="toggleArea($event,0)">
                        <div>热门</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,1)">
                        <div>国内</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,2)">
                        <div>国外</div>
                      </flexbox-item>
                    </flexbox>

                    <ul class="vux-1px-b">
                      <li style="display:block">
                        <div>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <span>不限</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <span>全部</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                    </ul>
                  </div>
                </li>

                <li class="screen">
                  <group>
                    <cell :border-intent="false" title="按时间排序"></cell>
                    <cell :border-intent="false" title="按人气排序"></cell>
                  </group>
                  <div style="text-align: center">
                    <div style="display: inline-block">
                      <x-button mini type="default">重置</x-button>
                      <x-button mini type="primary">确定</x-button>
                    </div>
                  </div>
                </li>


              </ul>
            </div>


          </div>


        </flexbox>

          
    <div  class="flexwrapper"> 
     <flexbox  :gutter="0" wrap="wrap" >
      <flexbox-item v-for="(item,index) in list" :key="index" align='center' :span="1/2">
       <a   href="./#/signup"> <div class="vux-1px flex-demo">  
         <div class="needsclick"  >
         <img class="needsclick logo"   :src='item.header'  alt="">
         </div> <div   class="content needsclick"> <p class="title">{{item.name}}</p>  <p class="time">{{item.time}}</p></div>  
        <a href="./#/signup"> <div class="button vux-1px-t">一键报名</div> </a> </div> </a> </flexbox-item>
    </flexbox>
    <div @click="modal" class="modal"></div>

    <myFooter :page="pageConfig"></myFooter>

    </div>
</div>
    
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";

import {
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Flexbox,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber } from "@/common/js/main.js";

export default {
  props: ["page", "host"],
  data() {
    return {
      pageConfig: window.pageConfig,
      value: "",
      list: []
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    errorImg(index) {
      console.log(index)
      //.src="http://placeholder.qiniudn.com/70x70/3cc51f/ffffff"
      
    },
    getList() {
      axios.get("http://v3.ihuipao.com/race/list?page=1").then(
        response => {
          if (response.data.code == "200") {
            this.list = response.data.data.list;
            this.list.forEach(function(item,index){
              if(item.header==null||item.header==''){
                  item.header=item.footer
              }
            })
            console.log(response.data.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    modal() {
      let flexItems = document.querySelectorAll(".selection .flex-demo");
      //let flexItem = document.querySelectorAll('.flex-demo')[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      [].forEach.call(flexItems, function(item, index) {
        item.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      });
    },
    chooseDate(e) {
      //console.log(e.target)

      if (e.target.innerHTML == "年") {
        document.querySelectorAll(".data-right")[0].style.display = "none";
        document.querySelectorAll(".data-right")[1].style.display = "block";
      } else {
        document.querySelectorAll(".data-right")[1].style.display = "none";
        document.querySelectorAll(".data-right")[0].style.display = "block";
      }
    },
    toggle(e, index) {
      let flexItems = document.querySelectorAll(".selection .flex-demo");

      let flexItem = document.querySelectorAll(".flex-demo")[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      //console.log(lists[index])
      //lists[index].style.display = 'block'

      if (flexItem.querySelector("i").className.indexOf("fa-sort-down") != -1) {
        // console.log(flexItem.querySelector('i').className)
        //   console.log(flexItem.querySelector('i').className.indexOf("fa-sort-down"))
        [].forEach.call(flexItems, function(item, index) {
          item.querySelector("i").className = "fa fa-sort-down";
          lists[index].style.display = "none";
        });
        flexItem.querySelector("i").className = "fa fa-sort-up";
        lists[index].style.display = "block";
        document.querySelector("#app .modal").style.display = "block";
      } else if (
        flexItem.querySelector("i").className.indexOf("fa-sort-up") != -1
      ) {
        flexItem.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      }

      //        if(index==1){
      //          document.querySelectorAll('.data-right')[0].style.display='block'
      //        }
    },
    toggleArea(e, index) {
      let area = document.querySelector(".area");
      //e.target.style.color='red';

      [].forEach.call(area.querySelectorAll("ul li"), function(item, index) {
        item.style.display = "none";
      });

      area.querySelectorAll("ul li")[index].style.display = "block";
      //console.log(index)
    }
  },
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
.flexwrapper {
  .flex-demo {
    width: 90%;
    background-clip: padding-box;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#racelist .content {
  padding-bottom: 0;
}

#race html,
#app body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.flex-demo {
  text-align: center;
}

#racelist .weui-media-box_appmsg .weui-media-box__hd {
  width: 70px;
  height: 70px;
}

#racelist .status {
  position: absolute;
  top: 4px;
  right: 0;
}

#racelist .vux-header .vux-header-left {
  top: 7px;
}

#racelist .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#racelist .vux-header-right {
  font-size: 25px;
  display: none;
}

#racelist .footerBanner {
  display: none;
}

#racelist .weui-tab__panel {
  padding-bottom: 0;
}

#racelist ul {
  background-color: #fcf9fe;
  li {
    background-color: white;
    margin-top: 10px;
  }
}

#racelist .selection {
  background-color: white;
  line-height: 30px;
  position: relative;
  z-index: 3;
}

#racelist .flex-demo .fa {
  vertical-align: text-top;
  padding-left: 5px;
}

#racelist .flex-demo .fa-sort-up {
  position: relative;
  top: 7px;
}

#racelist .wrapper {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
  width: 100%;
}

#racelist .modal {
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: none;
  opacity: 0.6;
  position: absolute;
  top: 0;
  z-index: 2;
}

#racelist .wrapper li {
  display: none;
  & > div > div {
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

#racelist .area .vux-flexbox-item {
  text-align: center;
}

#racelist .area span {
  padding: 10px;
  line-height: 2;
  display: inline-block;
}

#racelist .data-box {
  display: flex;
  .data-left {
    flex: 1;
    text-align: center;
  }
  .data-right {
    flex: 2;
  }
}

#racelist #CircleMenu {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#racelist .vux-search-box {
  z-index: 3;
  position: relative;
}

#racelist .vux-header {
  position: relative;
  z-index: 3;
}

#racelist .wrapper {
  padding: 0;
}

#racelist .vux-header .vux-header-left .left-arrow {
  top: 0;
}
</style>






